<#-- This is most general page layout. -->
<#macro page>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css">
    <link rel="stylesheet" type="text/css" href="css/tablesorter.css">
    <#list css as file>
    <link rel="stylesheet" type="text/css" href="css/${file}">
    </#list>
    <title>spamforces::${pageTitle}</title>
</head>
<body>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.chili-2.2.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.autocomplete.pack.js"></script>
<#list js as file>
<script src="js/${file}" language="javascript" type="text/javascript"></script>
</#list>

<script type="text/javascript">
    window.popup = function(title, width, height, onClose) {
        width = width || "50%";
        height = height || "23em";
        $("body").append("<div class='popup' style='width:" + width + ";height:" + height + ";'></div>");
        var result = $("body div.popup:last");
        result.css("top", ($(window).height() - result.height()) / 3 + 'px');
        result.css("left", ($(window).width() - result.width()) / 2 + 'px');
        var close = $("<div class='popup-close'><img src='image/close-10x10.png'/></div>");
        close.find("img").css("cursor", "pointer").attr("title", "Close popup").click(function() {
            result.remove();
            if (onClose != undefined) {
                onClose();
            }
        });
        result.append(close);
        result.append("<div class='title'>" + title + "</div>");
        return result;
    };

    $(function() {
    });
</script>
<div style="max-width:1400px;margin:0 auto;">
    <@frame name="messageBox"/>
    <@frame name="header"/>
    <@frame name="menu"/>
    <#nested>
    <@frame name="footer"/>
</div>
</body>
</html>
</#macro>

<#macro colorBox clazz style="">
<div class="color-box ${clazz}" style="${style!}">
    <div class="t t1">&nbsp;</div>
    <div class="t t2">&nbsp;</div>
    <div class="t t3">&nbsp;</div>
    <div class="t t4">&nbsp;</div>
    <div class="text">
        <#nested>
    </div>
</div>
</#macro>

<#macro errorLabel field = "">
<#if field?? && (field?length > 0)>
<div class="field-error">${field!?html}</div>
</#if>
</#macro>

<#macro errorField field = "" default= "" clazz = "under" column = 2 no_row = false defaultAsHtml=true>
<#if field?? && (field?length > 0)>
<#if !no_row>
<tr class="${clazz!}"></#if>
    <#if column == 2>
    <td>&nbsp;</td>
    </#if>
    <td>
        <div class="field-error">${field!?html}</div>
    </td>
    <#if !no_row></tr></#if>
<#else>
<#if (default?length > 0)>
<#if !no_row>
<tr class="${clazz!}"></#if>
    <#if column == 2>
    <td>&nbsp;</td>
    </#if>
    <td>
        <div class="field-notice">
            <#if defaultAsHtml>
            ${default?html}
            <#else>
            ${default}
            </#if>
        </div>
    </td>
    <#if !no_row></tr></#if>
</#if>
</#if>
</#macro>